<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>影流播 - YingLiuBo 全端万能播放器</title>
    <meta name="description" content="影流播是一款支持多端的全能媒体播放器，支持网页视频、本地文件、网盘资源播放">
    
    <!-- CDN资源 -->
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/daisyui/4.12.10/full.min.css" rel="stylesheet">
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.4.21/vue.global.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/video.js/8.6.1/video.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/video.js/8.6.1/video-js.min.css" rel="stylesheet">
    
    <style>
        :root {
            --primary-color: #ff0000;
            --secondary-color: #000000;
            --accent-color: #ff4444;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
            background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
            color: #ffffff;
        }
        
        .player-container {
            background: rgba(0, 0, 0, 0.9);
            border-radius: 12px;
            box-shadow: 0 8px 32px rgba(255, 0, 0, 0.3);
        }
        
        .url-input {
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: white;
            transition: all 0.3s ease;
        }
        
        .url-input:focus {
            background: rgba(255, 255, 255, 0.15);
            border-color: var(--accent-color);
            box-shadow: 0 0 0 3px rgba(255, 68, 68, 0.3);
        }
        
        .control-button {
            background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
            transition: all 0.3s ease;
        }
        
        .control-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(255, 0, 0, 0.4);
        }
        
        .video-js {
            width: 100%;
            height: 100%;
        }
        
        .hidden-controls {
            opacity: 0;
            transition: opacity 0.5s ease;
        }
        
        .show-controls {
            opacity: 1;
        }
        
        .logo {
            background: linear-gradient(135deg, #ff0000, #ff4444);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
    </style>
</head>
<body class="min-h-screen">
    <div id="app">
        <div class="container mx-auto px-4 py-8">
            <!-- 头部 -->
            <header class="text-center mb-8">
                <h1 class="text-5xl font-bold logo mb-2">影流播</h1>
                <p class="text-gray-300 text-lg">YingLiuBo 全端万能播放器</p>
            </header>

            <!-- 播放器主体 -->
            <div class="player-container p-6 mb-6">
                <!-- 视频播放区域 -->
                <div class="relative mb-6">
                    <video id="player" class="video-js vjs-default-skin" controls preload="auto" width="100%" height="400">
                        <source src="" type="video/mp4">
                        <p class="vjs-no-js">
                            您的浏览器不支持HTML5视频播放，请升级浏览器或
                            <a href="https://videojs.com/html5-video-support/" target="_blank">查看支持情况</a>
                        </p>
                    </video>
                </div>

                <!-- 三行URL输入区域 -->
                <div class="space-y-4">
                    <!-- 第一行：单行URL直接播放 -->
                    <div class="flex items-center space-x-2">
                        <i class="fas fa-play-circle text-red-500"></i>
                        <input type="url" v-model="singleUrl" 
                               placeholder="输入视频URL直接播放（支持任意网页视频、网盘资源）"
                               class="url-input flex-1 px-4 py-2 rounded-lg">
                        <button @click="playSingleUrl" class="control-button px-4 py-2 rounded-lg text-white">
                            <i class="fas fa-play"></i> 播放
                        </button>
                    </div>

                    <!-- 第二行：批量URL播放列表 -->
                    <div class="flex items-center space-x-2">
                        <i class="fas fa-list text-red-500"></i>
                        <input type="url" v-model="batchUrl" 
                               placeholder="添加多个视频URL到播放列表"
                               class="url-input flex-1 px-4 py-2 rounded-lg">
                        <button @click="addToBatch" class="control-button px-4 py-2 rounded-lg text-white">
                            <i class="fas fa-plus"></i> 添加
                        </button>
                        <button @click="playNext" class="control-button px-4 py-2 rounded-lg text-white">
                            <i class="fas fa-step-forward"></i> 下一个
                        </button>
                    </div>

                    <!-- 第三行：搜索URL跳转 -->
                    <div class="flex items-center space-x-2">
                        <i class="fas fa-search text-red-500"></i>
                        <input type="text" v-model="searchQuery" 
                               placeholder="输入关键词搜索视频资源"
                               class="url-input flex-1 px-4 py-2 rounded-lg">
                        <button @click="searchBaidu" class="control-button px-4 py-2 rounded-lg text-white">
                            <i class="fab fa-baidu"></i> 百度
                        </button>
                        <button @click="searchEdge" class="control-button px-4 py-2 rounded-lg text-white">
                            <i class="fab fa-edge"></i> Edge
                        </button>
                    </div>
                </div>

                <!-- 播放列表 -->
                <div v-if="batchUrls.length > 0" class="mt-4">
                    <h3 class="text-lg font-semibold mb-2">播放列表 ({{ batchUrls.length }}个视频)</h3>
                    <div class="max-h-40 overflow-y-auto bg-gray-800 rounded-lg p-2">
                        <div v-for="(url, index) in batchUrls" :key="index" 
                             class="flex items-center justify-between p-2 hover:bg-gray-700 rounded cursor-pointer"
                             :class="{ 'bg-red-900': index === currentBatchIndex }">
                            <span class="text-sm truncate flex-1">{{ url }}</span>
                            <div class="flex space-x-2">
                                <button @click="playBatchUrl(index)" class="text-blue-400 hover:text-blue-300">
                                    <i class="fas fa-play"></i>
                                </button>
                                <button @click="removeFromBatch(index)" class="text-red-400 hover:text-red-300">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 控制面板 -->
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                <!-- 视频控制 -->
                <div class="player-container p-4">
                    <h3 class="text-lg font-semibold mb-3">
                        <i class="fas fa-sliders-h text-red-500"></i> 视频控制
                    </h3>
                    <div class="space-y-3">
                        <div>
                            <label class="block text-sm mb-1">清晰度</label>
                            <select v-model="currentQuality" class="url-input w-full px-3 py-2 rounded">
                                <option value="auto">自动</option>
                                <option value="760">760P</option>
                                <option value="1080">1080P</option>
                                <option value="2k">2K</option>
                                <option value="4k">4K</option>
                                <option value="8k">8K</option>
                                <option value="16k">16K</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm mb-1">屏幕比例</label>
                            <select v-model="screenRatio" class="url-input w-full px-3 py-2 rounded">
                                <option value="auto">自适应</option>
                                <option value="wide">宽屏</option>
                                <option value="stretch">拉伸</option>
                                <option value="full">全屏</option>
                            </select>
                        </div>
                        <div class="flex space-x-2">
                            <button @click="skipBackward" class="control-button px-3 py-2 rounded text-sm">
                                <i class="fas fa-backward"></i> -5s
                            </button>
                            <button @click="skipForward" class="control-button px-3 py-2 rounded text-sm">
                                <i class="fas fa-forward"></i> +5s
                            </button>
                        </div>
                    </div>
                </div>

                <!-- 滤镜效果 -->
                <div class="player-container p-4">
                    <h3 class="text-lg font-semibold mb-3">
                        <i class="fas fa-palette text-red-500"></i> 视频滤镜
                    </h3>
                    <div class="grid grid-cols-2 gap-2">
                        <button v-for="filter in filters" :key="filter.value"
                                @click="applyFilter(filter.value)"
                                class="url-input px-3 py-2 rounded text-sm hover:bg-red-900">
                            {{ filter.label }}
                        </button>
                    </div>
                </div>

                <!-- 音效系统 -->
                <div class="player-container p-4">
                    <h3 class="text-lg font-semibold mb-3">
                        <i class="fas fa-music text-red-500"></i> 音效系统
                    </h3>
                    <div class="space-y-2">
                        <select v-model="currentAudioEffect" class="url-input w-full px-3 py-2 rounded">
                            <option value="normal">标准音效</option>
                            <option value="viper">蝰蛇音效</option>
                            <option value="3d">3D丽音</option>
                            <option value="surround">5.1全景</option>
                            <option value="car">汽车音效</option>
                            <option value="freebuds">FreeBuds 3</option>
                            <option value="hifi">HIFI现场</option>
                            <option value="concert">演唱会</option>
                        </select>
                        <button @click="toggleAudioEffect" class="control-button w-full px-3 py-2 rounded text-sm">
                            <i class="fas fa-volume-up"></i> 应用音效
                        </button>
                    </div>
                </div>
            </div>

            <!-- 历史记录 -->
            <div class="player-container p-4 mt-6">
                <div class="flex items-center justify-between mb-3">
                    <h3 class="text-lg font-semibold">
                        <i class="fas fa-history text-red-500"></i> 播放历史
                    </h3>
                    <button @click="clearHistory" class="text-red-400 hover:text-red-300 text-sm">
                        <i class="fas fa-trash"></i> 清空记录
                    </button>
                </div>
                <div class="max-h-32 overflow-y-auto">
                    <div v-for="(item, index) in playHistory" :key="index" 
                         class="flex items-center justify-between p-2 hover:bg-gray-800 rounded">
                        <span class="text-sm truncate flex-1">{{ item.url }}</span>
                        <span class="text-xs text-gray-400 ml-2">{{ item.time }}</span>
                        <button @click="playFromHistory(item.url)" 
                                class="text-blue-400 hover:text-blue-300 ml-2">
                            <i class="fas fa-redo"></i>
                        </button>
                    </div>
                </div>
            </div>

            <!-- 网盘扫码区域 -->
            <div class="player-container p-4 mt-6">
                <h3 class="text-lg font-semibold mb-3">
                    <i class="fas fa-cloud text-red-500"></i> 网盘资源
                </h3>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <button @click="scanBaiduPan" class="control-button p-4 rounded-lg">
                        <i class="fab fa-baidu text-2xl mb-2"></i>
                        <div>百度网盘</div>
                    </button>
                    <button @click="scanAliPan" class="control-button p-4 rounded-lg">
                        <i class="fas fa-cloud text-2xl mb-2"></i>
                        <div>阿里云盘</div>
                    </button>
                    <button @click="scanXunleiPan" class="control-button p-4 rounded-lg">
                        <i class="fas fa-bolt text-2xl mb-2"></i>
                        <div>迅雷网盘</div>
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script>
        const { createApp } = Vue;

        createApp({
            data() {
                return {
                    singleUrl: '',
                    batchUrl: '',
                    searchQuery: '',
                    batchUrls: [],
                    currentBatchIndex: 0,
                    currentQuality: 'auto',
                    screenRatio: 'auto',
                    currentAudioEffect: 'normal',
                    currentFilter: 'normal',
                    playHistory: [],
                    player: null,
                    filters: [
                        { label: '标准', value: 'normal' },
                        { label: '黑白', value: 'grayscale' },
                        { label: '艳丽', value: 'saturate' },
                        { label: '怀旧', value: 'sepia' },
                        { label: '冷色', value: 'cool' },
                        { label: '暖色', value: 'warm' },
                        { label: '反色', value: 'invert' },
                        { label: '蓝光', value: 'blue' }
                    ],
                    hideControlsTimer: null
                }
            },
            mounted() {
                this.initPlayer();
                this.loadHistory();
                this.setupAutoHide();
            },
            methods: {
                initPlayer() {
                    this.player = videojs('player', {
                        controls: true,
                        fluid: true,
                        controlBar: {
                            children: [
                                'playToggle',
                                'progressControl',
                                'volumePanel',
                                'qualitySelector',
                                'fullscreenToggle'
                            ]
                        }
                    });
                },
                
                playSingleUrl() {
                    if (!this.singleUrl) return;
                    
                    this.player.src({ src: this.singleUrl, type: 'video/mp4' });
                    this.player.play();
                    this.addToHistory(this.singleUrl);
                },
                
                addToBatch() {
                    if (!this.batchUrl) return;
                    this.batchUrls.push(this.batchUrl);
                    this.batchUrl = '';
                },
                
                playBatchUrl(index) {
                    this.currentBatchIndex = index;
                    this.singleUrl = this.batchUrls[index];
                    this.playSingleUrl();
                },
                
                playNext() {
                    if (this.batchUrls.length === 0) return;
                    this.currentBatchIndex = (this.currentBatchIndex + 1) % this.batchUrls.length;
                    this.playBatchUrl(this.currentBatchIndex);
                },
                
                removeFromBatch(index) {
                    this.batchUrls.splice(index, 1);
                },
                
                searchBaidu() {
                    if (!this.searchQuery) return;
                    window.open(`https://www.baidu.com/s?wd=${encodeURIComponent(this.searchQuery)}`, '_blank');
                },
                
                searchEdge() {
                    if (!this.searchQuery) return;
                    window.open(`https://cn.bing.com/search?q=${encodeURIComponent(this.searchQuery)}`, '_blank');
                },
                
                skipBackward() {
                    const currentTime = this.player.currentTime();
                    this.player.currentTime(Math.max(0, currentTime - 5));
                },
                
                skipForward() {
                    const currentTime = this.player.currentTime();
                    this.player.currentTime(Math.min(this.player.duration(), currentTime + 5));
                },
                
                applyFilter(filter) {
                    this.currentFilter = filter;
                    const video = document.querySelector('video');
                    const filters = {
                        normal: '',
                        grayscale: 'grayscale(100%)',
                        saturate: 'saturate(200%)',
                        sepia: 'sepia(100%)',
                        cool: 'hue-rotate(180deg)',
                        warm: 'hue-rotate(30deg)',
                        invert: 'invert(100%)',
                        blue: 'hue-rotate(240deg)'
                    };
                    video.style.filter = filters[filter] || '';
                },
                
                toggleAudioEffect() {
                    // 音效处理逻辑
                    console.log('应用音效:', this.currentAudioEffect);
                },
                
                addToHistory(url) {
                    const item = {
                        url: url,
                        time: new Date().toLocaleString('zh-CN')
                    };
                    // 避免重复
                    this.playHistory = this.playHistory.filter(h => h.url !== url);
                    this.playHistory.unshift(item);
                    // 限制历史记录数量
                    if (this.playHistory.length > 100) {
                        this.playHistory = this.playHistory.slice(0, 100);
                    }
                    localStorage.setItem('yingliubo_history', JSON.stringify(this.playHistory));
                },
                
                loadHistory() {
                    const saved = localStorage.getItem('yingliubo_history');
                    if (saved) {
                        this.playHistory = JSON.parse(saved);
                    }
                },
                
                clearHistory() {
                    this.playHistory = [];
                    localStorage.removeItem('yingliubo_history');
                },
                
                playFromHistory(url) {
                    this.singleUrl = url;
                    this.playSingleUrl();
                },
                
                setupAutoHide() {
                    let hideTimer;
                    const resetTimer = () => {
                        clearTimeout(hideTimer);
                        document.querySelector('.vjs-control-bar').classList.add('show-controls');
                        hideTimer = setTimeout(() => {
                            document.querySelector('.vjs-control-bar').classList.remove('show-controls');
                        }, 5000);
                    };
                    
                    document.addEventListener('mousemove', resetTimer);
                    document.addEventListener('click', resetTimer);
                },
                
                scanBaiduPan() {
                    alert('请使用手机扫描二维码登录百度网盘');
                },
                
                scanAliPan() {
                    alert('请使用手机扫描二维码登录阿里云盘');
                },
                
                scanXunleiPan() {
                    alert('请使用手机扫描二维码登录迅雷网盘');
                }
            }
        }).mount('#app');
    </script>
</body>
</html>
